<template>
	<view>
		
		<view class="dflex">
			<map style="width:100%;height:150px" 
				:latitude="latitude"
				:longitude="longitude" 
				scale="16" 
				@tap="chooseLocation"
			>
			</map>
		</view>
		
		<view class="dflex p12" @click="now">
			<button type="primary">刷新当前位置</button>
		</view>			
		
		<view class="p12">
			<view class="cflex f14 aic bg_F6F7 radius10 p12" style="background-color: #fffbe6; border: 2px dotted #333;" v-if="display">
				<text>省份：{{ provinceName }}</text>
				<text class="mt12">城市：{{ cityName }}</text>
				<view class="dflex aib">
					<text class="mt12 mr12">CityCode：{{ cityCode }}</text>
					<image src="/packageShop/static/copy.png" class="w15" mode="widthFix" @click="copyCityCode"></image>
				</view>
				<text class="mt12" v-if="showLocation">位置：{{ location }}</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude : '',
				longitude : '',
				provinceName : '',
				cityName : '',
				cityCode : '',
				display : false,
				key : '4MBBZ-Y5NKR-7SLWB-WW7XD-U66TE-YEBRD',
				location : '',
				showLocation : false
			}
		},
		onLoad() {
			this.now()
		},
		methods: {
			now() {
				uni.getLocation({
				type: 'gcj02',
				success:(res)=> {					
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.getInfo()
					}
				})
			},
			getInfo() {
				//申请地址：https://lbs.qq.com/dev/console/application/mine
				uni.request({
						url:'https://apis.map.qq.com/ws/geocoder/v1/?location=' + this.latitude + ',' + this.longitude + '&key=' + this.key,
						// url:'https://apis.map.qq.com/ws/geocoder/v1/?location=39.466729,75.992857&key='+key,
						method:"GET",
						success:(ress)=> {
							// console.log('resssssssssssss',ress.data)
							this.display = true
							this.provinceName = ress.data.result.address_component.province
							this.cityCode = ress.data.result.ad_info.city_code	
							this.cityName = ress.data.result.address_component.city
						}
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					type: 'gcj02',
					success: (res) => {
						// console.log(res)
						this.showLocation  = true
						this.location = res.name
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.getInfo()
					},
					fail: (res) => {
						// console.log(res)
					}
				});
			},
			copyCityCode() {
				uni.setClipboardData({
					data: this.cityCode,
					success: () => {
						uni.showToast({
							title : '复制成功',
							icon : 'success'
						})
					}
				})
			},
		}
	}
</script>

<style>

</style>
